<template>

    <div style="width:100%;height:100%;padding: 0 0;margin: 0px 0px 0px 0px;">
        <el-row>
            <el-col :span=20>
                <transition name="el-zoom-in-top">
                    <div v-if="showcards">
                        <el-card>
                            <div id="commonUser" style="line-height:40px;padding:0 0">
                                <strong>用户列表</strong>
                                <el-button 
                                    type="primary" 
                                    style="float:right;margin-left: 1%"
                                    @click="showAddDrawer">新增</el-button>
                                <el-input 
                                    v-model="userSearch" 
                                    class="search"
                                    style="float:right;width:40%"
                                    placeholder="Search" 
                                    clearable />
                            </div>
                            <!-- users.filter(data => !userSearch || data.userName.toLowerCase().includes(userSearch.toLowerCase())) -->
                            <el-table
                                :data="users.filter(data => !userSearch || data.username.includes(userSearch))"
                                style="width:100%;margin-top:10px;"
                                height=240
                                border
                            >

                                <el-table-column
                                    prop="id"
                                    label="ID">
                                </el-table-column>

                                <el-table-column
                                    prop="username"
                                    label="用户名"
                                    >
                                </el-table-column>

                                <el-table-column
                                    label="角色"
                                    width="200"
                                    >

                                    <template slot-scope="scope">
                                        <el-tag 
                                            size="medium" 
                                            :key="i" 
                                            style="margin: 0 5px"
                                            v-for="(auth, i) in scope.row.authorities">

                                            {{ roleCodeToName[auth.authority] }}

                                        </el-tag>
                                    </template>

                                </el-table-column>

<!-- handleEdit(scope.$index, scope.row) -->
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                        size="mini"
                                        type="primary"
                                        @click="showEditDrawer(scope.row)"><i class="el-icon-edit"></i></el-button>

                                        <el-popconfirm 
                                            :title='"确认删除 " + scope.row.username + " ?"'
                                            icon='el-icon-warning'
                                            icon-color='red'
                                            @confirm='handleDelete(scope.row.id)'>
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            slot="reference"
                                            style="margin-left:2%"
                                            >
<!-- @click="handleDelete(scope.row)" -->
                                            <i class="el-icon-delete"></i>

                                        </el-button>
                                        </el-popconfirm>
                                        
                                    </template>
                                </el-table-column>

                            </el-table>


                            <!-- <el-pagination style="bottom:0"
                                layout="prev, pager, next"
                                :total="50">
                            </el-pagination> -->

                            
                        </el-card>
                        
                    </div>
                </transition>
            </el-col>
        </el-row>

        
        <el-drawer
            ref="editDrawer"
            title="编辑"
            :visible.sync="editDrawer"
            :with-header="true"
            :modal=false
            :append-to-body=true>

            <div>
                <el-form>
                    <el-form-item label="ID">
                        <!-- <el-input 
                            autocomplete="off" 
                            v-model="user.id"
                            clearable/> -->
                            {{editUser.id}}
                    </el-form-item>

                    <el-form-item label="用户名">
                        <el-input
                            autocomplete="off"
                            v-model="editUser.username"
                            style="width:50%"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input
                            v-model="editUser.password"
                            type="password"
                            clearable
                            style="width:50%;margin-left:13px;"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-checkbox-group v-model="roleList">
                            <el-checkbox  style="margin-left:13px;" label="管理员"></el-checkbox>
                            <el-checkbox label="普通用户"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <!-- <el-form-item label="活动区域">
                        <el-select placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>

                <div class="demo-drawer__footer">
                    <el-button @click="cancleEditForm">取 消</el-button>
                    <el-button type="primary" @click="submitEdit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>

            </div>

        </el-drawer>

        <el-drawer
            ref="addDrawer"
            id="add"
            title="+ 新增"
            :visible.sync="addDrawer"
            :with-header="true"
            :modal=false
            :append-to-body=true
            >

            <div>
                <el-form ref="addUser" :model="addUser">
                    <el-form-item label="用户名">

                        <el-input 
                            v-model="addUser.username"
                            autocomplete="off" 
                            maxlength="10"
                            show-word-limit
                            clearable
                            style="width:50%"
                            />

                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input 
                            v-model="addUser.password"
                            type="password"
                            clearable
                            style="width:50%;margin-left:13px"
                        />
                    </el-form-item>

                    <el-form-item label="角色">
                        <el-checkbox-group v-model="roleList">
                            <el-checkbox  style="margin-left:13px;" label="管理员"></el-checkbox>
                            <el-checkbox label="普通用户"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    
                </el-form>

                <div class="demo-drawer__footer">
                    <el-button @click="cancelAddForm">取 消</el-button>
                    <el-button type="primary" @click="submitAdd" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>

            </div>

        </el-drawer>
        
    </div>
   
</template>

<script>
    import request from '@/api/client'

    const roleMap = {
        '管理员': 1,
        '普通用户': 2
    }


    // const roleCodeToName = {
    //     'ROLE_ADMIN': '管理员',
    //     'ROLE_USER': '普通用户'
    // }

    export default {
        name: 'UInfo',
        data() {
            return {
                roleCodeToName: {
                    'ROLE_ADMIN': '管理员',
                    'ROLE_USER': '普通用户'
                },

                roleNameToId: {
                    '管理员': 1,
                    '普通用户': 2
                },

                // User List
                users: [
                    {
                        id: '',
                        userName: ''
                    }
                ],

                addUser: {
                    username: '',
                    password: ''
                },

                editUser: {
                    id: 0,
                    userName: ''
                },

                roleList: [
                ],

                // 显示 卡片
                showcards: false,

                // 普通用户输入框
                userSearch: '',

                // 编辑 抽屉
                editDrawer: false,

                // 新增 抽屉
                addDrawer: false,

                // 提交中
                loading: false,

                // dialog: false,
            }
        },

        inject: ['reload'],

        created() {

        },

        // 刷新事件
        mounted() {
            this.users = this.getUser()
            this.showcards = true
        },

        methods: {

            showAddDrawer() {
                this.roleList.splice(0, this.roleList.length)
                this.addDrawer = true;
                this.addUser.username = '';
                this.addUser.password = '';
            },

            showEditDrawer(user) {
                this.roleList.splice(0, this.roleList.length)
                this.editDrawer = true;
                this.editUser = user
                let auths = user.authorities
                for(let auth in auths) {
                    let authority = auths[auth].authority
                    this.roleList.push(this.roleCodeToName[authority])
                }
            },
        
            getUser(userName) {
                request.getList(userName).then(response => {
                    this.users = response.data.data.users
                })
            },

            // 删除
            handleDelete(id) {

                request.deleteUser(id).then(response => {
                    
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })

                    // 重新加载组件
                    // 由父组件注入
                    this.reload()
                })

            },

            // 提交 新增
            // onSubmitAdd() {
            //     $refs.addDrawer.closeDrawer()
            // },

            submitAdd() {
                console.log('新增用户')
                this.loading = true
                console.log(this.addUser)
                request.saveUser(this.addUser).then(resp => {
                    let roleCodes = []
                    for (let i in this.roleList) {
                        roleCodes.push(this.roleNameToId[this.roleList[i]]) 
                    }
                    request.updateRole(resp.data.data.user.id, roleCodes).then(resp => {
                        this.loading = false
                        this.reload()
                    })
                })
            },

            submitEdit() {
                console.log('编辑用户')
                this.loading = true
                console.log(this.editUser)
                this.editUser.authorities = null
                request.updateUser(this.editUser).then(resp => {
                    console.log('用户信息编辑完成！')
                    let roleCodes = []
                    for (let i in this.roleList) {
                        roleCodes.push(this.roleNameToId[this.roleList[i]]) 
                    }
                    request.updateRole(this.editUser.id, roleCodes).then(resp => {
                        console.log('角色编辑完成')
                        this.loading = false
                        this.reload()
                    })
                    
                }) 
                
            },

            cancelAddForm() {
                this.loading = false;
                // this.dialog = false;
                // clearTimeout(this.timer);
                this.$refs.addDrawer.closeDrawer()
            },

            cancleEditForm() {
                this.loading = false;
                // this.dialog = false;
                // clearTimeout(this.timer);
                this.$refs.editDrawer.closeDrawer()
            }

        }

    }
</script>

<style>

#users > .el-checkbox {
    width: 100%;
    margin: 0px;
    padding-left: 0px;
}

#users > .el-checkbox.is-checked {
    background-color: #409eff;
}

.search {
    box-shadow: none;
}

.el-drawer__body {
    padding: 20px 20px;
}

.el-drawer__header {
    margin-bottom: 0;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 20px;
}

/* .el-input__inner {
    border-radius: 30px
} */

 #commonUser .el-input__inner {
    border-radius: 30px
}

#add .el-input__inner, .el-input {
    /* box-shadow: none; */
    border-radius: 5px;
}

/*
 #commonUser > .el-input__inner {
    border-radius: 30px
} */

</style>